<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例：完整轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        img {
            vertical-align: middle;
        }

        .lunbo {
            width: 820px;
            overflow: hidden;
            margin: 0 auto;
            border: 5px solid red;
            position: relative;
        }

        .lunboBox {
            width: 4100px;
            display: flex;
            position: relative;
            left: 0;
            transition: left 0.5s;
        }

        .lubnoBox li {
            flex: 1;
        }

        .lubnoBox li>img {
            width: 100%;
        }

        .tabList {
            display: flex;
            line-height: 40px;
            background-color: #ccc;
        }

        .tabList li {
            flex: 1;
            text-align: center;
            cursor: pointer;
        }

        .tabList li.current {
            background-color: #fff;
        }

        .btn {
            position: absolute;
            top: 50%;
            padding: 5px 10px;
            border: none;
            color: #666;
            font-size: 24px;
            cursor: pointer;
        }

        .btn:hover {
            opacity: .8;
        }

        .previous {
            left: 20px;
        }

        .next {
            right: 20px;
        }
    </style>
</head>

<body>
    <div class="lunbo">
        <ul class="lunboBox">
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240815/3d8169fc2f298fab04c59f555a7547c7.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240822/f3c465ca96b33aeaaa0c1431470fc80b.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240801/8ee5e012bf0e2049793bfa077c0fb28f.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240718/8860962f84f44ae4e3eda5730583563c.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240823/db9b846d7b4524f910cf0c29dfce1bd6.jpeg"
                    alt=""></li>
        </ul>
        <ul class="tabList">
            <li class="tabItem current">选项1</li>
            <li class="tabItem">选项2</li>
            <li class="tabItem">选项3</li>
            <li class="tabItem">选项4</li>
            <li class="tabItem">选项5</li>
        </ul>
        <input type="button" value="&lt;" class="btn previous">
        <input type="button" value="&gt;" class="btn next">
        <script>
            class Newlunbo {
                constructor() {
                    // 定义属性
                    this.index = 0;
                    this.box = document.querySelector('.lunbo');
                    this.lunboBox = document.querySelector('.lunboBox');
                    this.tabItems = document.querySelectorAll('.tabItem');
                    this.previous = document.querySelector('.previous');
                    this.next = document.querySelector('.next');
                    // 定义定时器
                    this.time = null;
                    this.init();
                }

                init() {
                    // 定义开始定时器时间
                    this.startTime();
                    // 监听鼠标移入移出事件
                    this.box.addEventListener('mouseenter', () => this.stopTime());
                    this.box.addEventListener('mouseleave', () => this.startTime());
                    // 监听选项卡点击事件
                    this.tabItems.forEach((item, i) => {
                        item.addEventListener('click', () => this.changeSlide(i));
                    });
                    this.next.addEventListener('click', () => this.nextSlide());
                    this.previous.addEventListener('click', () => this.previousSlide());
                }
                // 进入下一张图片时间
                startTime() {
                    this.time = setInterval(() => this.nextSlide(), 1500);
                }
                // 清除定时器
                stopTime() {
                    clearInterval(this.time);
                }
                nextSlide() {
                    this.index++;
                    if (this.index === this.tabItems.length) { 
                        this.index = 0; 
                    }
                    this.setSlide();
                }

                previousSlide() {
                    this.index--;
                    if (this.index === -1) {
                        this.index = this.tabItems.length - 1;
                    }
                    this.setSlide();
                }

                changeSlide(newIndex) {
                    this.index = newIndex;
                    this.setSlide();
                }
                // 设置轮播图
                setSlide() {
                    this.lunboBox.style.left = -820 * this.index + 'px';
                    this.tabItems.forEach(item => item.classList.remove('current'));
                    this.tabItems[this.index].classList.add('current');
                }
            }

            new Newlunbo();
        </script>
</body>

</html>